<template>
	<input type="text" v-model="str" class="input"/>
	<button @click="add">添加</button>
	<view v-for="(item,index) in arr" :key="item.id">
		<switch :checked= "item.completed" @change="Xg" type="checkbox"/>
		<view>
			{{item.title}}
		</view>
		<button @click="Sc(index)">删除</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[
					{id:0,title:"哈哈",completed:true},
					{id:1,title:"呵呵",completed:false}
				],
				str:""
			}
		},
		onLoad() {

		},
		methods: {
            add(){
				if(this.str == ""){
					return
				}
			   const list ={
				   id:this.arr.length+1,
				   title:this.str,
				   completed:false
			   }
			this.arr.push(list)
			this.str=""
			},
		Sc(index){
			this.arr.splice(index, 1);
		},
		Xg(){
			this.arr.completed = !this.arr.completed
			console.log(this.arr.completed);
		}
		}
	}
</script>

<style>
	.input{
		border: 1rpx solid black;
		width: 400rpx;
	}
</style>
